<template>
    <div>
      <h2>各设备周平均能耗变化图(kwh)</h2>
      <div class="chart1" id="myEchartsTwo">
          图表内容
      </div>
    </div>
  </template>
  
  <script>
  import {inject,onMounted,reactive} from "vue"
  export default {
    setup(){
      let $echarts=inject("echarts")
      let $http=inject("axios")

      let data=reactive({})

      async function getState(){
        data=await $http({url:"/two/data"})
      }
      onMounted(()=>{
        getState().then(()=>{
          console.log("折线图",data)
          let myChart=$echarts.init(document.getElementById("myEchartsTwo"))
          myChart.setOption({
            tooltip:{
              trigger:"axis",
              axisPointer:{
                type:"cross",
                label:{
                  backgroundColor:"#e6b600"
                }
              }
            },
            legend:{
              data:["照明灯","电脑","空调","风扇","监控器","烟雾报警器"]
            },
            grid:{
              left:"1%",
              right:"4%",
              bottom:"1%",
              containLabel:true
            },
            xAxis: {
    type: 'category',
    boundaryGap:false,
    data: data.data.chartTwo.chartData.day,
    axisLine:{
      lineStyle:{
        color:"#fff"
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLine:{
      lineStyle:{
        color:"#fff"
      }
    }
  },
  series: [
    {
      name:"照明灯",
      type: 'line',
      data:data.data.chartTwo.chartData.num.Lights
    },
    {
      name:"电脑",
      type: 'line',
      data:data.data.chartTwo.chartData.num.Computer
    },
    {
      name:"空调",
      type: 'line',
      data:data.data.chartTwo.chartData.num.airconditioning
    },
    {
      name:"风扇",
      type: 'line',
      data:data.data.chartTwo.chartData.num.fan
    },
    {
      name:"监控器",
      type: 'line',
      data:data.data.chartTwo.chartData.num.Monitors
    },
    {
      name:"烟雾报警器",
      type: 'line',
      data:data.data.chartTwo.chartData.num.Smokealarms
    },
  ]
})
})
})
return {
        getState,data
      }
    }
  }
  </script>
  
  <style>
  .chart1{
  height: 2.7rem;
}
  h2{
  height: 0.2rem;
  color: #0b5ae2;
  line-height: 0.25rem;
  text-align: center;
  font-size: 0.2rem;
}
  </style>